<template>
  <div class="box">
    <img src="./项目图片/互动/右上角日历.png" alt="" />
    <h2>关注&nbsp;&nbsp;&nbsp;&nbsp;推荐</h2>
    <img class="a" src="./项目图片/互动/右上角发布.png" alt="" />
  </div>
  <div class="box2" v-for="(item,index) in arr.data" :key="index">
    <div class="top-left">
       <img :src="item.userImage" alt=""/>
    </div>
    <div class="top-right">
      <p>{{item.userName}}</p>
      <span>{{item.postDate}}</span>
    </div>
    <div class="count">
      <span>{{item.content}}</span>
    </div>
    <div class="count-img">
      <img :src="item.image[0]" />&nbsp;
      <img class="b" v-if="index == 0" :src="item.image[1]" />
    </div>
    <hr style="margin-top:2.1875rem">

    <div class="bottom">
      <ul class="ul-a">
        <img src="./项目图片/互动/分享.png" alt="" />
        <li>{{item.collect}}</li>
      </ul>
      <ul class="ul-b">
        <img src="./项目图片/互动/评论.png" alt="" />
        <li>{{item.comment}}</li>
      </ul>
      <ul class="ul-c">
        <img src="./项目图片/互动/点赞.png" alt="" />
        <li>{{item.thumbsUp}}</li>
      </ul>
    </div>

    <div class="a"></div>
  </div>
</template>

<script>
import { interact } from "@/api/interact";
import { reactive, toRefs, onMounted } from "vue";
export default {
  name: "IndexInteraction", //互动

  setup() {
    let data = reactive({
      postId: 1,
      userId: 2,
      userImage: "",
      userName: "",
      content: "",
      postDate: "2023-05-01T16:00:00.000+0000",
      image: [
        "",
        "",
      ],
      thumbsUp: 6666,
      comment: 2,
      collect: 1,
    });
    
    let arr = reactive({
      data: [],
    });
    interact(data)
      .then((res) => {
        console.log(res);
        arr.data = res;
        console.log((res = arr));
        console.log("ab", arr.data);
      })
      .catch(() => {});

    onMounted(() => {
      interact();
    });

    return {
      arr,
      data,
      ...toRefs(data),
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  height: 5rem;
  background-color: rgb(185, 187, 223);
}
.box > img {
  width: 1.875rem;
  height: 1.875rem;
  margin-left: 1.25rem;
  margin-top: 1.5625rem;
}
.box > h2 {
  margin-left: 8.75rem;
  margin-top: -2.1875rem;
  color: aliceblue;
}
.box > .a {
  width: 1.875rem;
  height: 1.875rem;
  position: relative;
  margin-left: 21.0625rem;
  top: -3.4375rem;
}
.box2 {
  height: 16.75rem;
  background-color: whitesmoke;
  margin-top: 2.8125rem;
}
.top-left{
 width: 3.75rem;
 height: 3.75rem;
 margin-left: 1.25rem;
 margin-top: .625rem;
 position: absolute;
}
.top-left img{
 width: 3.75rem;
 height: 3.75rem;
}
.top-right{
  margin-left: 6.25rem;
  margin-top: -2.875rem;
  position: relative;
  top: .625rem;
}
.top-right p{
  font-size: 1.25rem;
  margin: .625rem;
}
.count{
  margin-top: 2.25rem;
  margin-left: 1.25rem;
}
.count-img{
  width: 10.75rem;
  height: 3.75rem;
  margin-left: 1.25rem;
}
.count-img img{
  width: 4.75rem;
  height: 4.75rem;
}
.bottom{
  margin-top: .625rem;
}
.bottom > .ul-a > img {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  top: 0.4rem;
}
.bottom > .ul-a > li {
  position: relative;
  float: left;
  font-size: 1.0625rem;
  left: 3.75rem;
  top: 0.4rem;
  list-style: none;
}
.bottom > .ul-b > img {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  left: 6.25rem;
  top: -0.9375rem;
}
.bottom > .ul-b > li {
  position: relative;
  float: left;
  font-size: 1.0625rem;
  left: 10.75rem;
  list-style: none;
  top: -1rem;
}
.bottom > .ul-c > img {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  left: 14.25rem;
  top: -2.5rem;
}
.bottom > .ul-c > li {
  position: relative;
  float: left;
  font-size: 1.0625rem;
  left: 18.75rem;
  list-style: none;
  top: -2.4375rem;
}
.a{
  width: 100%;
  height: .625rem;
  margin-top: -1.875rem;
  background-color: rgb(185, 187, 223);
}
</style>